<header fxLayout fxLayoutAlign="start center">
  <span fxFlex="50px">{{event.operator.name}}</span>
  <span fxFlex>{{event.fireDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</span>
  <button mat-button type="button">
    {{'EventSourceType.SilkCarInfoFetchEvent'|translate}}
  </button>
</header>

<section fxLayout="column">
  <table [dataSource]="dataSource" mat-table>
    <ng-container matColumnDef="code">
      <th *matHeaderCellDef mat-header-cell>{{'Silk.code'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.spindleCode}}</td>
    </ng-container>

    <ng-container matColumnDef="position">
      <th *matHeaderCellDef mat-header-cell>{{'position'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.sideType}}-{{row.row}}-{{row.col}}</td>
    </ng-container>

    <ng-container matColumnDef="grade">
      <th *matHeaderCellDef mat-header-cell>{{'grade'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.grade?.name}}</td>
    </ng-container>

    <ng-container matColumnDef="spec">
      <th *matHeaderCellDef mat-header-cell>{{'spec'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        {{row.silk.lineMachine.line.name}}-{{row.silk.spindle}}/{{row.silk.lineMachine.item}}-{{row.silk.doffingNum}}
      </td>
    </ng-container>

    <ng-container matColumnDef="actualPosition">
      <th *matHeaderCellDef mat-header-cell>{{'actualPosition'|translate}}({{data.bindNum}})</th>
      <td *matCellDef="let row" mat-cell>{{row.actualPosition}}</td>
    </ng-container>

    <ng-container matColumnDef="grabFlage">
      <th *matHeaderCellDef mat-header-cell>{{'grabFlage'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.grabFlage}}</td>
    </ng-container>

    <ng-container matColumnDef="eliminateFlage">
      <th *matHeaderCellDef mat-header-cell>{{'eliminateFlage'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.eliminateFlage}}</td>
    </ng-container>

    <ng-container matColumnDef="detached">
      <th *matHeaderCellDef mat-header-cell>{{'detached'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.detached}}</td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
  </table>
</section>
